<template>
  <div @contextmenu.prevent.stop="tabsClickRight">
    <a-tabs v-model:activeKey="activeKey" type="editable-card" @change="changeView" @edit="delTabs">
       <a-tab-pane v-for="item in viewTage" :key="item.name" :tab="item.title"></a-tab-pane>
    </a-tabs>
  </div>
  <a-card class="handle_card" v-show="handleMenu.show" :body-style="{padding:'0px'}" :style="handleMenu.style">
    <ul>
      <!--      <li @click="clearRight">-->
      <!--        <RightOutlined/>-->
      <!--        {{ $t('关闭右侧') }}-->
      <!--      </li>-->
      <!--      <li @click="clearLeft">-->
      <!--        <LeftOutlined/>-->
      <!--        {{ $t('关闭左侧') }}-->
      <!--      </li>-->
      <li @click="clearAll">
        <CloseCircleOutlined/>
        关闭全部
      </li>
    </ul>
  </a-card>
</template>

<script>
import {computed, onMounted, reactive, ref, watch} from "vue";
import {useStore} from 'vuex'
import {useRoute, useRouter} from 'vue-router'
import {RightOutlined, CloseCircleOutlined, LeftOutlined} from '@ant-design/icons-vue'

export default {
  components: {
    CloseCircleOutlined,
    LeftOutlined,
    RightOutlined
  },
  setup() {
    const tabViewList = ref([])
    const store = useStore()
    const route = useRoute()
    const viewTage = computed(() => store.getters.getCacheView)
    const handleMenu = reactive({
      style: {},
      show: false
    })
    const activeKey = computed(() => route.name)
    const router = useRouter()

    function tabsClickRight(e) {
      handleMenu.show = true
      handleMenu.style.top = (e.pageY + 10) + 'px'
      handleMenu.style.left = (e.pageX + 10) + 'px'
    }

    function clearAll() {
      store.commit('DEL_CACHE_VIEW', [])
      router.push('/index')
    }

    function clearLeft() {

    }

    function clearRight() {

    }

    function changeView(key) {
      const $r = viewTage.value.find(_ => _.name === key)
      router.push({
        name: $r.name,
        query: $r.query
      })
    }

    function delTabs(key) {
      if (key === 'Index') return
      const $r = viewTage.value.filter(item => item.name !== key)
      store.commit('DEL_CACHE_VIEW', $r)
      if ($r.length === 0) {
        router.push('/index')
      } else {
        router.push({
          name: $r[$r.length - 1].name,
          query: {
            ...$r[$r.length - 1].query
          }
        })
      }
    }

    onMounted(() => {
      document.body.addEventListener('click', () => {
        handleMenu.show = false
      })
    })
    return {
      viewTage,
      activeKey,
      changeView,
      delTabs,
      tabViewList,
      tabsClickRight,
      handleMenu,
      clearAll,
      clearLeft,
      clearRight
    }
  }
}
</script>

<style scoped lang="less">
.list-enter-active,
.list-leave-active {
  transition: all 1s ease;
}
.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateY(30px);
}
::v-deep .ant-tabs-extra-content {
  display: none;
}

::v-deep.ant-tabs-bar {
  margin-bottom: 10px !important;
}

::v-deep .ant-tabs-tab {
  margin-right: 5px !important;
}

.handle_card {
  position: absolute;
  z-index: 9999;
  min-width: 120px;

  ul {
    list-style: none;
    margin: 0;
    padding: 10px 0;
    font-size: 14px;

    li {
      padding: 5px 15px;
      cursor: pointer;
    }

    li:hover {
      background-color: #e8f4ff;
      color: #409eff;
    }
  }
}
</style>
